/**
 * @var json   列表卡片拼接数据
 * @var list   获取列表id
 * @var str    字符串拼接所有卡片内容
 * 
 */

var json = [
    {
        listImg: "./img/listImg1.jpg",
        title: "星啦啦啦啦啦啦啦啦啦啦啦啦",
        type: "服装-正装/礼服",
        itemView: "1.5万",
        itemComment: "32",
        itemGood: "700",
        cardBottomImg: "./img/card_bottom1.jpg",
        cardBottomName: "婚纱设计师兰奕",
        cardBottomTime: "4天前"
    },
    {
        listImg: "./img/listImg2.jpg",
        title: "一些患得患失的梦",
        type: "插画-商业插画",
        itemView: "5.9万",
        itemComment: "213",
        itemGood: "2775",
        cardBottomImg: "./img/card_bottom2.jpg",
        cardBottomName: "苏虾仔",
        cardBottomTime: "4天前"
    },
    {
        listImg: "./img/listImg3.jpg",
        title: "蜉蝣",
        type: "插画-绘本",
        itemView: "2.3万",
        itemComment: "41",
        itemGood: "860",
        cardBottomImg: "./img/card_bottom3.jpg",
        cardBottomName: "Tong_W",
        cardBottomTime: "15天前"
    },
    {
        listImg: "./img/listImg4.jpg",
        title: "【行香子】",
        type: "摄影-人像",
        itemView: "2.4万",
        itemComment: "41",
        itemGood: "478",
        cardBottomImg: "./img/card_bottom4.jpg",
        cardBottomName: "小艾野",
        cardBottomTime: "11天前"
    },
    {
        listImg: "./img/listImg5.jpg",
        title: "彩铅色粉人像教程",
        type: "纯艺术-彩铅",
        itemView: "4.4万",
        itemComment: "116",
        itemGood: "1371",
        cardBottomImg: "./img/card_bottom5.jpg",
        cardBottomName: "沁风",
        cardBottomTime: "23天前"
    },
    {
        listImg: "./img/listImg1.jpg",
        title: "星啦啦啦啦啦啦啦啦啦啦啦啦",
        type: "服装-正装/礼服",
        itemView: "1.5万",
        itemComment: "32",
        itemGood: "700",
        cardBottomImg: "./img/card_bottom1.jpg",
        cardBottomName: "婚纱设计师兰奕",
        cardBottomTime: "4天前"
    },
    {
        listImg: "./img/listImg2.jpg",
        title: "一些患得患失的梦",
        type: "插画-商业插画",
        itemView: "5.9万",
        itemComment: "213",
        itemGood: "2775",
        cardBottomImg: "./img/card_bottom2.jpg",
        cardBottomName: "苏虾仔",
        cardBottomTime: "4天前"
    },
    {
        listImg: "./img/listImg3.jpg",
        title: "蜉蝣",
        type: "插画-绘本",
        itemView: "2.3万",
        itemComment: "41",
        itemGood: "860",
        cardBottomImg: "./img/card_bottom3.jpg",
        cardBottomName: "Tong_W",
        cardBottomTime: "15天前"
    },
    {
        listImg: "./img/listImg4.jpg",
        title: "【行香子】",
        type: "摄影-人像",
        itemView: "2.4万",
        itemComment: "41",
        itemGood: "478",
        cardBottomImg: "./img/card_bottom4.jpg",
        cardBottomName: "小艾野",
        cardBottomTime: "11天前"
    },
    {
        listImg: "./img/listImg5.jpg",
        title: "彩铅色粉人像教程",
        type: "纯艺术-彩铅",
        itemView: "4.4万",
        itemComment: "116",
        itemGood: "1371",
        cardBottomImg: "./img/card_bottom5.jpg",
        cardBottomName: "沁风",
        cardBottomTime: "23天前"
    }

];

// let btnAjax = document.querySelector(".btnAjax");
// btnAjax.addEventListener("click",sendAjax);
sendAjax();
function sendAjax() {
    xhrGet("/zcool", { pageSize: 20 }).then((res) => {
        let zcoolData = JSON.parse(res).data.contents;
        showData(zcoolData);
    });
}

function showData(zcoolData) {
    var list = document.querySelector(".list");
    var str = "";
    for (var i = 0; i < zcoolData.length; i++) {
        str += '<li class="card_box">' +
            '<img src="' + zcoolData[i].cover1x + '" alt="" srcset="">' +
            '<div class="card_info">' +
            '<p class="title">' +
            '<a href="#">' + zcoolData[i].title + '</a>' +
            '</p>' +
            '<p class="type">' + zcoolData[i].subCateStr + '</p>' +
            '<p class="item">' +
            '<span class="view">' + zcoolData[i].viewCount + '</span>' +
            '<span class="comment">' + zcoolData[i].commentCount + '</span>' +
            '<span class="good">' + zcoolData[i].favoriteCount + '</span>' +
            '</p>' +
            '</div >' +
            '<div class="card_bottom">' +
            '<a href="#">' +
            '<img src="' + zcoolData[i].creatorObj.avatar1x + '" alt="">' +
            '<span>' + zcoolData[i].creatorObj.username + '</span>' +
            '</a>' +
            '<span class="fr time">' + zcoolData[i].publishTimeDiffStr + '</span>' +
            '</div>' +
            '</li>'
    }
    list.innerHTML = str;
}



// 搜索框点击显示输入框
var search = document.querySelector(".search");
var nav = document.querySelector(".nav");
var searchDiv = document.querySelector(".searchDiv");
var searchInput = document.querySelector(".searchInput");
var closeBtn = document.querySelector(".closeBtn");

// 监听点击事件
search.addEventListener("click", showInput);
//输入框失焦的时候隐藏搜索框
searchInput.addEventListener("blur", showNav);
// searchDiv.addEventListener("click", stopDomClick);
// closeBtn.addEventListener("click", closeSearch);

//显示搜索框 
function showInput(evt) {
    // var e = evt || event;
    // event.stopPropagation();
    // search.style.opacity = 0;
    // nav.style.opacity = 0;
    // searchDiv.style.opacity = 1;
    move(search, 0, "opacity");
    move(nav, 0, "opacity");
    move(searchDiv, 100, "opacity");
    nav.style.zIndex = -1;
    searchDiv.style.zIndex = 1;
    searchInput.focus();
}
// 隐藏搜索框和显示导航栏
function showNav() {
    // search.style.opacity = 1;
    // nav.style.opacity = 1;
    // searchDiv.style.opacity = 0;
    move(search, 100, "opacity");
    move(nav, 100, "opacity");
    move(searchDiv, 0, "opacity");
    nav.style.zIndex = 2;
    // searchDiv.style.zIndex = -1;
}
// // 阻止搜索框点击事件冒泡
// function stopDomClick(evt) {
//     var e = evt || event;
//     event.stopPropagation();
// }
// 点击关闭按钮时隐藏搜索框，显示导航栏
// function closeSearch() {
//     // search.style.opacity = 1;
//     // nav.style.opacity = 1;
//     // searchDiv.style.opacity = 0;
//     move(search, 100, "opacity");
//     move(nav, 100, "opacity");
//     move(searchDiv, 0, "opacity");
//     searchDiv.style.zIndex = -1;
// }

// 轮播图
var leftArrow = document.querySelector(".leftArrow");
var rightArrow = document.querySelector(".rightArrow");
var bannerUl = document.querySelector(".bannerUl");
var buttons = document.querySelector('.circleTab').getElementsByTagName('li');
var bannerList = bannerUl.children;
var index = 0;
var timer = null;

function toPrev() {
    if (index === 0) {//到第一张了
        bannerUl.style.left = -100 * (bannerList.length - 1) + "%";
        index = bannerList.length - 2;
    } else {
        index--;
    }
    animate();
    showButton();
}
function toNext() {
    if (index === bannerList.length - 1) {//到最后一张了
        bannerUl.style.left = 0;
        index = 1;
    } else {
        index++;
    }
    animate();
    showButton();
}
// 轮播图移动的动画
function animate() {
    // autoPlay("off")
    move(bannerUl, -1130 * index, "left", function () {
        // autoPlay("on")
    });
}
// 自动播放
function autoPlay(arg) {
    if (arg === "off") {
        return clearInterval(timer);
    }
    timer = setInterval(function () {
        toNext();
    }, 3000);
}
// 点击索引按钮显示样式
function showButton() {
    for (var i = 0; i < buttons.length; i++) {
        if (buttons[i].className == 'on') {
            buttons[i].className = '';
            break;
        }
    }
    if (index === bannerList.length - 1) {
        buttons[0].className = 'on';
    } else {
        buttons[index].className = 'on';
    }

}
// 初始化
function init() {
    bannerUl.style.width = 100 * bannerList.length + "%";
    // 绑定左右箭头动画的监听事件
    leftArrow.addEventListener("click", toPrev);
    rightArrow.addEventListener("click", toNext);
    // 鼠标移入左右箭头时停止自动播放，移出时开启自动播放
    leftArrow.onmouseenter = function () {
        autoPlay("off")
    }
    rightArrow.onmouseenter = function () {
        autoPlay("off")
    }
    leftArrow.onmouseleave = function () {
        autoPlay("on")
    }
    rightArrow.onmouseleave = function () {
        autoPlay("on")
    }
    // 给索引按钮绑定事件
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].index = i;
        buttons[i].onmouseover = function () {
            autoPlay("off");
            index = this.index;
            animate();
            showButton();
        }
        buttons[i].onmouseout = function () {
            autoPlay("on");
        }
    }
    // 自动播放
    timer = setInterval(function () {
        toNext();
    }, 3000);
}
init();

// 回到顶部
var goTop = document.querySelector(".goTop");
goTop.addEventListener("click", goScrollTop);
document.addEventListener("scroll", scrollDistance);
function scrollDistance() {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop > 100) {
        goTop.style.display = "block";
    } else {
        goTop.style.display = "none";
    }
}
function goScrollTop() {
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
}
